<!DOCTYPE html>
<html lang="en">
    
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
<style>
    body{
	margin: 0;
	padding: 0;
	height: auto;
	text-decoration: none;
	list-style: none;
	font-size: 12px;
	background-color: #F5F5F5;
}

 .shoppingBar {
      width: 1130px;
      border: 2px solid #F5F5F5;
      margin: 40px auto;
      position: relative;
      background-color: white;
      font-size: 16px;
    }

    .shoppingBar h2 {
      height: 60px;
      line-height: 60px;
      color: black;
      text-indent: 40px;
    }
    .shoppingBar table {
      width: 100%;
      margin-bottom: 60px;
    }
    .shoppingBar table .money{
    	color: red;
    }
    .shoppingBar table .commodity{
    	border: 3px solid #F5F5F5;
    	height: 150px;
    }
    .shoppingBar>table tr th input{
    	width: 25px;
    	height: 25px;
    	margin-left: 30px;
    }
    .shoppingBar table tr:first-of-type {
      height: 80px;
      color: #424242;
      font-size: 14px;
      border-top: 1px solid #F5F5F5;
      border-bottom: 1px solid #F5F5F5;
    }
    .shoppingBar table tr th img {
      width: 120px;
      height: 100px;
      float: left;
    }

    .shoppingBar table tr th p {
      float: right;
      width: 100px;
      font-size: 18px;
      color: #424242;
    }

    .shoppingBar table tr .content {
      width: 220px;
      padding: 0 100px;
    }

    .shoppingBar table tr #delete {
      cursor: pointer;
      font-size: 20px;
    }
    
    .shoppingBar table tr #delete:hover{
    	color: red;
    }
    
    .shoppingBar .shoppingBar-footer {
      border: 1px solid #F5F5F5;
      width: 1130px;
      height: 60px;
      position: absolute;
      margin-top: 10px;
      color: #757575;
      font-size: 14px;
      background-color: white;
    }

    .shoppingBar .shoppingBar-footer .manage {
      float: left;
      height: 40px;
    }

    .shoppingBar .shoppingBar-footer .manage .delAll,
    .return { 
      cursor: pointer;
      background: #F5F5F5;
      color: #757575;
      line-height: 60px;
      margin: 0px 30px;
    }
    .shoppingBar .shoppingBar-footer .manage .delAll,
    .return:hover{
    	color: #FF6700;
    	transition: all 0.5s ease-in-out; 
    }
    .shoppingBar .shoppingBar-footer .buy {
      float: right;
      height: 40px;
      line-height: 60px;
    }

    .shoppingBar .shoppingBar-footer #go {
      float: right;
      height: 60px;
      width: 110px;
      font-weight: 400;
      font-size: 18px;
      outline: none;
      background-color: #E0E0E0;
      border: none;
      border-radius: 2px;
      margin-left: 10px;
      cursor: pointer;
      color: white;
    }
    .shoppingBar .shoppingBar-footer .active{
    	background-color: #FF6700;
    }
    .shoppingBar .shoppingBar-footer .buy span {
      font-weight: bold;
      font-size: 30px;
      color: red;
    }
    .shoppingBar .shoppingBar-footer #go:hover{
    	background-color: red;
    	transition: all 0.5s ease 0s;
    }
</style>
<script src="vue-2.5.17.js"></script>
</head>

<body>

<!--购物车商品table-->
<div id="app">
    <div class="shoppingBar">
        <h2>购物清单</h2>
        <table>
            <tbody>
                <tr>
                    <th>
                        <input type="checkbox" title="全选" v-model="checked"  @change="selectAll">
                    </th>
                    <th>商品名称</th>
                    <th>数量</th>
                    <th>单价（元）</th>
                    <th>金额（元）</th>
                    <th>操作</th>
                </tr>
                <tr class="commodity" v-for="(goods,index) in goodslist">
                    <th>
                        <input type="checkbox" class="input" :value="goods.id" v-model="checkArr">
                    </th>
                    <th class="content">
                        <img :src="goods.img"  width="100px" height="100px">
                        <p>{{goods.title}}  </p>
                    </th>
                    <th>
                        <button type="button" @click="decr(index)">
                            -
                        </button>
                        <span>
                            {{goods.number}}
                        </span>
                        <button type="button" @click="incr(index)">
                            +
                        </button>
                    </th>
                    <th>
                        {{goods.price}}
                    </th>
                    <th class="money">
                        {{goods.number * goods.price}}
                    </th>
                    <th>
                        <span  class="glyphicon glyphicon-remove">删除
                        </span>
                    </th>
                </tr>

            </tbody>
        </table>
        <div class="shoppingBar-footer">
            <div class="manage">
                <span class="delAll">
                    删除所选商品
                </span>
                <span class="return">
                    继续购物
                </span>
            </div>
            <button id="go" type="button">
                去结算
            </button>
            <div class="buy">
                <span>
                    0
                </span>
                件商品总计:
                <span>
                    ￥{{total}}
                </span>
            </div>
        </div>
    </div>
</div>
    
    
</body>

</html>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            goodslist:[
                {id:1,title:'电视机',img:'img/20201102150701.png',number:1,price:200},
                {id:2,title:'洗衣机',img:'img/20201102150701.png',number:1,price:150},
                {id:3,title:'冰箱',img:'img/20201102150701.png',number:1,price:100}
            ],
            // 表示全选是否被选中
            checked:false,
            // 记录当前被选中的 商品的id
            checkArr:[],
            // 总金额
            // total:0
        },
        // 监听方式
        // watch:{
        //     checkArr:function(){
        //         this.total = 0;
        //         for(var i = 0;i<this.checkArr.length;i++){
        //            for(var j = 0;j<this.goodslist.length;j++){
        //                 //当前循环的数据 就是goodslist数据    
        //                if(this.checkArr[i] == this.goodslist[j].id){
        //                     this.total += this.goodslist[j].number * this.goodslist[j].price;
        //                }
        //            }
        //         }
        //     }
        // },
        computed:{
            total:function(){
                var sum = 0;
                for(var i = 0;i<this.goodslist.length ;i++){
                    // 判断当前循环的数据是否被选中
                    if(this.checkArr.indexOf(this.goodslist[i].id) > -1){
                        sum += this.goodslist[i].price * this.goodslist[i].number;
                    }
                }
                return sum;
            }
        },
        methods:{
            incr:function(index){
                console.log(index)
                this.goodslist[index].number ++;
                
            },
            decr:function(index){
                if(this.goodslist[index].number <=1){
                    alert('数量最少一件');
                    return false;
                }
                this.goodslist[index].number--;
            },
            selectAll:function(){
                if(this.checked){
                    // 全部选中的操作
                    // 将所有的商品的id添加到checkArr中。由于v-model的双向绑定 会自动选中
                    for(var i = 0; i<this.goodslist.length;i++){
                        this.checkArr.push(this.goodslist[i].id);
                    }
                }else{
                    // 取消全选
                    this.checkArr=[];
                }
            }
        }
    })
</script>